<template>
  <a-table ref="tables" id="tables" :columns="columns" :data-source="data" :pagination="{ pageSize: 50 }" :scroll="{ y: 235 }" />
</template>
<script>
import { set } from 'nprogress'
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 150,
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
]

const data = []
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  })
}

export default {
  data() {
    return {
      data,
      columns,
      posY: 0,
    }
  },
  created() {
    start_Stop('#tables .ant-table-body', 5)
    function start_Stop(scroll_box, period) {
      //scroll_box为滚动条div,period为暂停时间/秒
      let num = 0
      let t = 0
      setTimeout(() => {
        t = setInterval(funt, 1)
      }, period * 1000)
      function funt() {
        let scr_el = document.querySelectorAll(scroll_box)[0] || document.getElementById(scroll_box)
        
        console.log(scr_el);
        let scroll_h = scr_el.clientHeight
        scr_el.scrollTop += 1
        num++
        console.log(num)
        console.log(scr_el)
        if (num % scroll_h == 0) {
          clearInterval(t)
          setTimeout(() => {
            t = setInterval(funt, 1)
          }, period * 1000)
        }
      }
    }
  },
}
</script>
